<template>
  <div class="login-container">
    <div class="login flex-container">
      <!-- Logo区域 -->
      <div class="logo flex-container">
        <img src="../../assets/upload/onePiece.png" alt="" />
        <div class="title">
          <h1>OnePice</h1>
          <p>vue3-admin后台管理系统</p>
        </div>
      </div>
      <!-- 表单区域 -->
      <div class="form">
        <el-form :model="loginForm" status-icon label-width="0px" class="demo-ruleForm" ref="loginForm"
          :rules="loginFormRuies">
          <el-form-item prop="username">
            <el-input prefix-icon="icon-user-tie" v-model="loginForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" prefix-icon="icon-key" v-model="loginForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
            <el-button @click="resetForm('loginForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 其他登陆区域 -->
      <div class="otherLogin">
        <div class="tit">
          <p>其他登录</p>
        </div>
        <div class="ic">
          <!-- qq登陆 -->
          <svg t="1679892827435" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="19364">
            <path
              d="M511.09761 957.257c-80.159 0-153.737-25.019-201.11-62.386-24.057 6.702-54.831 17.489-74.252 30.864-16.617 11.439-14.546 23.106-11.55 27.816 13.15 20.689 225.583 13.211 286.912 6.767v-3.061z"
              fill="#FAAD08" p-id="19365"></path>
            <path
              d="M496.65061 957.257c80.157 0 153.737-25.019 201.11-62.386 24.057 6.702 54.83 17.489 74.253 30.864 16.616 11.439 14.543 23.106 11.55 27.816-13.15 20.689-225.584 13.211-286.914 6.767v-3.061z"
              fill="#FAAD08" p-id="19366"></path>
            <path
              d="M497.12861 474.524c131.934-0.876 237.669-25.783 273.497-35.34 8.541-2.28 13.11-6.364 13.11-6.364 0.03-1.172 0.542-20.952 0.542-31.155C784.27761 229.833 701.12561 57.173 496.64061 57.162 292.15661 57.173 209.00061 229.832 209.00061 401.665c0 10.203 0.516 29.983 0.547 31.155 0 0 3.717 3.821 10.529 5.67 33.078 8.98 140.803 35.139 276.08 36.034h0.972z"
              fill="#000000" p-id="19367"></path>
            <path
              d="M860.28261 619.782c-8.12-26.086-19.204-56.506-30.427-85.72 0 0-6.456-0.795-9.718 0.148-100.71 29.205-222.773 47.818-315.792 46.695h-0.962C410.88561 582.017 289.65061 563.617 189.27961 534.698 185.44461 533.595 177.87261 534.063 177.87261 534.063 166.64961 563.276 155.56661 593.696 147.44761 619.782 108.72961 744.168 121.27261 795.644 130.82461 796.798c20.496 2.474 79.78-93.637 79.78-93.637 0 97.66 88.324 247.617 290.576 248.996a718.01 718.01 0 0 1 5.367 0C708.80161 950.778 797.12261 800.822 797.12261 703.162c0 0 59.284 96.111 79.783 93.637 9.55-1.154 22.093-52.63-16.623-177.017"
              fill="#000000" p-id="19368"></path>
            <path
              d="M434.38261 316.917c-27.9 1.24-51.745-30.106-53.24-69.956-1.518-39.877 19.858-73.207 47.764-74.454 27.875-1.224 51.703 30.109 53.218 69.974 1.527 39.877-19.853 73.2-47.742 74.436m206.67-69.956c-1.494 39.85-25.34 71.194-53.24 69.956-27.888-1.238-49.269-34.559-47.742-74.435 1.513-39.868 25.341-71.201 53.216-69.974 27.909 1.247 49.285 34.576 47.767 74.453"
              fill="#FFFFFF" p-id="19369"></path>
            <path
              d="M683.94261 368.627c-7.323-17.609-81.062-37.227-172.353-37.227h-0.98c-91.29 0-165.031 19.618-172.352 37.227a6.244 6.244 0 0 0-0.535 2.505c0 1.269 0.393 2.414 1.006 3.386 6.168 9.765 88.054 58.018 171.882 58.018h0.98c83.827 0 165.71-48.25 171.881-58.016a6.352 6.352 0 0 0 1.002-3.395c0-0.897-0.2-1.736-0.531-2.498"
              fill="#FAAD08" p-id="19370"></path>
            <path
              d="M467.63161 256.377c1.26 15.886-7.377 30-19.266 31.542-11.907 1.544-22.569-10.083-23.836-25.978-1.243-15.895 7.381-30.008 19.25-31.538 11.927-1.549 22.607 10.088 23.852 25.974m73.097 7.935c2.533-4.118 19.827-25.77 55.62-17.886 9.401 2.07 13.75 5.116 14.668 6.316 1.355 1.77 1.726 4.29 0.352 7.684-2.722 6.725-8.338 6.542-11.454 5.226-2.01-0.85-26.94-15.889-49.905 6.553-1.579 1.545-4.405 2.074-7.085 0.242-2.678-1.834-3.786-5.553-2.196-8.135"
              fill="#000000" p-id="19371"></path>
            <path
              d="M504.33261 584.495h-0.967c-63.568 0.752-140.646-7.504-215.286-21.92-6.391 36.262-10.25 81.838-6.936 136.196 8.37 137.384 91.62 223.736 220.118 224.996H506.48461c128.498-1.26 211.748-87.612 220.12-224.996 3.314-54.362-0.547-99.938-6.94-136.203-74.654 14.423-151.745 22.684-215.332 21.927"
              fill="#FFFFFF" p-id="19372"></path>
            <path
              d="M323.27461 577.016v137.468s64.957 12.705 130.031 3.91V591.59c-41.225-2.262-85.688-7.304-130.031-14.574"
              fill="#EB1C26" p-id="19373"></path>
            <path
              d="M788.09761 432.536s-121.98 40.387-283.743 41.539h-0.962c-161.497-1.147-283.328-41.401-283.744-41.539l-40.854 106.952c102.186 32.31 228.837 53.135 324.598 51.926l0.96-0.002c95.768 1.216 222.4-19.61 324.6-51.924l-40.855-106.952z"
              fill="#EB1C26" p-id="19374"></path>
          </svg>
          <!-- 微信 -->
          <svg t="1679893037420" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="25108">
            <path
              d="M582.330848 511.939207a24.637074 24.637074 0 0 0-23.250572 24.210459 24.210458 24.210458 0 0 0 23.250572 21.3308c17.491256 0 30.076428-10.6654 30.076429-21.3308A26.983462 26.983462 0 0 0 582.864118 511.939207z m-76.684227-112.200009a27.73004 27.73004 0 0 0 29.969775-25.383653v-3.73289A27.410078 27.410078 0 0 0 510.339397 341.292805h-4.692776a31.356276 31.356276 0 0 0-34.022626 28.26331v0.959886a31.9962 31.9962 0 0 0 34.022626 29.223197zM514.818865 1.386502a511.299283 511.299283 0 1 0 511.299283 511.192629A511.299283 511.299283 0 0 0 514.818865 1.386502z m-96.628525 640.777241A274.420746 274.420746 0 0 1 335.746797 629.258609l-84.150007 42.6616 24.210458-71.564835A192.617127 192.617127 0 0 1 181.311803 441.227604c0-113.26655 106.654002-199.869599 236.558575-199.869599C533.270008 241.358005 635.657849 309.296604 655.602147 406.245092a114.439744 114.439744 0 0 0-22.503994-2.453042 193.470359 193.470359 0 0 0-200.722831 186.111232v1.279848a198.269789 198.269789 0 0 0 6.719202 50.020727 193.790321 193.790321 0 0 1-20.79753 0.853232z m347.372083 81.803619l16.638024 59.939549-63.245823-35.72909a369.662769 369.662769 0 0 1-71.564835 12.478518A186.644503 186.644503 0 0 1 447.946806 589.05005a186.644503 186.644503 0 0 1 199.442983-171.606288c105.694115 0 200.722831 76.684227 200.722831 171.606288a176.405718 176.405718 0 0 1-82.443543 134.917312zM341.292805 341.292805a32.956086 32.956086 0 0 0-35.835745 29.116542A33.489356 33.489356 0 0 0 341.292805 399.52589a28.583272 28.583272 0 0 0 29.969774-27.303425v-1.813118A28.156656 28.156656 0 0 0 343.852501 341.292805z m372.222465 170.646402a23.99715 23.99715 0 0 0-23.357226 24.210459A25.810268 25.810268 0 1 0 723.434092 511.939207a21.3308 21.3308 0 0 0-10.6654 0z"
              fill="#1AAB37" p-id="25109"></path>
          </svg>
          <!-- 抖音 -->
          <svg t="1679893087375" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="25444">
            <path
              d="M0 0m184.32 0l655.36 0q184.32 0 184.32 184.32l0 655.36q0 184.32-184.32 184.32l-655.36 0q-184.32 0-184.32-184.32l0-655.36q0-184.32 184.32-184.32Z"
              fill="#111111" p-id="25445"></path>
            <path
              d="M204.27776 670.59712a246.25152 246.25152 0 0 1 245.97504-245.97504v147.57888a98.49856 98.49856 0 0 0-98.38592 98.38592c0 48.34304 26.14272 100.352 83.54816 100.352 3.81952 0 93.55264-0.88064 93.55264-77.19936V134.35904h157.26592a133.31456 133.31456 0 0 0 133.12 132.99712l-0.13312 147.31264a273.152 273.152 0 0 1-142.62272-38.912l-0.06144 317.98272c0 146.00192-124.24192 224.77824-241.14176 224.77824-131.74784 0.03072-231.1168-106.56768-231.1168-247.92064z"
              fill="#FF4040" p-id="25446"></path>
            <path
              d="M164.92544 631.23456a246.25152 246.25152 0 0 1 245.97504-245.97504v147.57888a98.49856 98.49856 0 0 0-98.38592 98.38592c0 48.34304 26.14272 100.352 83.54816 100.352 3.81952 0 93.55264-0.88064 93.55264-77.19936V94.99648h157.26592a133.31456 133.31456 0 0 0 133.12 132.99712l-0.13312 147.31264a273.152 273.152 0 0 1-142.62272-38.912l-0.06144 317.98272c0 146.00192-124.24192 224.77824-241.14176 224.77824-131.74784 0.03072-231.1168-106.56768-231.1168-247.92064z"
              fill="#00F5FF" p-id="25447"></path>
            <path
              d="M410.91072 427.58144c-158.8224 20.15232-284.44672 222.72-154.112 405.00224 120.40192 98.47808 373.68832 41.20576 380.70272-171.85792l-0.17408-324.1472a280.7296 280.7296 0 0 0 142.88896 38.62528V261.2224a144.98816 144.98816 0 0 1-72.8064-54.82496 135.23968 135.23968 0 0 1-54.70208-72.45824h-123.66848l-0.08192 561.41824c-0.11264 78.46912-130.9696 106.41408-164.18816 30.2592-83.18976-39.77216-64.37888-190.9248 46.31552-192.57344z"
              fill="#FFFFFF" p-id="25448"></path>
          </svg>
          <!-- 手机 -->
          <svg t="1679893134558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="26482">
            <path
              d="M768 0 256 0C220.8 0 192 28.8 192 64l0 896c0 35.2 28.8 64 64 64l512 0c35.2 0 64-28.8 64-64L832 64C832 28.8 803.2 0 768 0zM656 32C665.6 32 672 38.4 672 48S665.6 64 656 64 640 57.6 640 48 646.4 32 656 32zM464 32l96 0C569.6 32 576 38.4 576 48 576 57.6 569.6 64 560 64l-96 0C454.4 64 448 57.6 448 48 448 38.4 454.4 32 464 32zM512 992c-25.6 0-48-22.4-48-48S486.4 896 512 896s48 22.4 48 48S537.6 992 512 992zM768 832c0 19.2-12.8 32-32 32L288 864c-19.2 0-32-12.8-32-32L256 128c0-19.2 12.8-32 32-32l448 0c19.2 0 32 12.8 32 32L768 832z"
              fill="#1571E5" p-id="26483"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyLogin',
  data() {
    return {
      // 表单登录数据绑定对象 loginForm
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      // 表单校验
      loginFormRuies: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(ruleForm) {
      // 提交数据
      this.$refs[ruleForm].validate(async validate => {
        if (!validate) return // 此时校验不通过执行
        // 此时校验通过
        const { data: res } = await this.$http.post('/login', this.loginForm)
        // 参数检验
        if (res.meta.status !== 200) return this.$message.error('登陆失败')
        // 此时登陆成功
        this.$message.success('恭喜登陆成功')
        // 1 将登陆成功后的tocken保存到 sessionStorage中
        const token = res.data.token
        window.sessionStorage.setItem('token', token)
        // 1.1 项目中其他出现登陆之外地API接口，必须在登陆之后才能访问
        // 1.2 tocken 只因只能在当前网站打开时才能生效 ，所有才将 tocken 保存到 sessionStorage中
        //  1.3 通过编程式跳转到后台管理界面 , 路由地址是 /home
        this.$router.push('/home')
      })
    },
    resetForm(formName) {
      // 重置表单
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background-color: #ecf5ff;

  .login {
    flex-direction: column;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 500px;
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgb(243, 215, 220));
    box-shadow: 1px 1px 30px 10px rgba(0, 0, 0, 0.1), inset 1px 1px 30px 10px rgba(52, 47, 47, 0.1);
    border-radius: 50px;

    // Logo区域
    .logo {
      margin-bottom: 40px;
      width: 100%;
      height: 80px;

      img {
        width: 70px;
        height: 70px;
        margin-right: 15px;
      }

      .title {
        h1 {
          color: #3eaf7c;
        }

        p {
          font-size: 11px;
          color: #858484;
        }
      }
    }

    // 表单区域
    .form {
      width: 100%;
      flex: 1;

      .btns {
        margin-left: 50px;
      }
    }

    // 其他登录区域
    .otherLogin {
      position: absolute;
      bottom: 40px;
      right: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100px;

      .ic {
        margin-top: 20px;
        height: 60px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 0 10px;
        cursor: pointer;
      }

      p {
        color: #888686;
        cursor: pointer;
      }
    }
  }
}
</style>
